<!--
 * @Description: 
 * @Date: 2024-01-17 08:53:28
 * @LastEditTime: 2024-02-04 16:15:34
-->
<template>
  <el-dialog
    title="代表选择"
    :visible.sync="dialogVisible"
    class="qc-config-dialog"
    width="800px"
    :append-to-body="true"
  >
    <div class="userDialog-list">
      <div>
        <div class="userDialog-header">
          <el-input
            placeholder="请输入代表团名称"
            v-model="name"
            @keyup.enter.native="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="resetQuery"
            >重置</el-button
          >
        </div>
        <el-table :data="groupList" style="width: 100%" height="485" border>
          <el-table-column
            prop="name"
            label="代表团名称"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            width="100px"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleAllocation(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          style="display: flex; justify-content: center"
          v-show="total > 0"
          layout="prev, pager, next"
          :current-page.sync="queryParams.pageNum"
          :page-size.sync="queryParams.pageSize"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
      <div>
        <div class="userDialog-header">
          <el-button type="primary" @click="resetQuery">清空</el-button>
          <el-button
            type="success"
            :disabled="type == 'FuYi' ? false : true"
            @click="handleAll"
            >全选</el-button
          >
        </div>
        <el-table :data="roleList" style="width: 100%" height="485" border>
          <el-table-column
            prop="userName"
            label="代表"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            width="100px"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleSelect(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="userDialog-header">
          <el-button type="primary" @click="handleClear">清空</el-button>
        </div>
        <el-table :data="selectList" style="width: 100%" height="485" border>
          <el-table-column
            prop="userName"
            label="姓名"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            width="100px"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDelegationList } from "@/api/dbxx/dbxxgroup/index";
import { addManageList } from "@/api/dbxx/dbxxManage";
export default {
  name: "userDialog",
  props: ["value", "type"],
  data() {
    return {
      dialogVisible: false,
      name: "",
      groupList: [],
      roleList: [],
      selectList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    addDelegationList({
      ...this.queryParams,
      orderByColumn: "orderId",
      isAsc: "asc",
    }).then((res) => {
      this.groupList = res.rows;
      this.total = res.total;
    });
  },
  methods: {
    currentChange(value) {
      this.queryParams.pageNum = value;
      addDelegationList({
        ...this.queryParams,
        orderByColumn: "orderId",
        isAsc: "asc",
      }).then((res) => {
        this.groupList = res.rows;
        this.total = res.total;
      });
    },

    handleAllocation(row) {
      addManageList({ deId: row.deId }).then((response) => {
        this.roleList = response.rows;
      });
    },
    handleSelect(row) {
      if (this.type == "FuYi") {
        this.selectList.push(row);
      } else {
        this.selectList = [row];
      }
    },
    handleDelete(row) {
      this.selectList = this.selectList.filter((item) => {
        return item.userId != row.userId;
      });
    },
    submitForm() {
      this.$emit("submit", this.selectList, this.type);
      this.dialogVisible = false;
    },
    handleQuery() {
      currentChange({ name: this.name }).then((response) => {
        this.roleList = response.rows;
      });
    },
    resetQuery() {
      this.name = "";
      this.roleList = [];
      // addManageList().then((response) => {
      //   this.roleList = response.rows;
      // });
    },
    handleAll() {
      this.selectList = this.roleList;
    },
    handleClear() {
      this.selectList = [];
    },
  },
  watch: {
    value: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
      this.$emit("input", val); //关键input
    },
  },
};
</script>

<style lang="scss" scoped>
.userDialog-list {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  overflow: hidden;
  & > div {
    flex: 1;
    overflow: hidden;
    .userDialog-header {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
    }
  }
}
::v-deep .el-button--mini {
  padding: 4px 6px;
}
</style>
